<!DOCTYPE html>
<html lang="en" ng-app>
<head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css'/>

    <script src="javascripts/three.js"></script>
    <script src="javascripts/TrackballControls.js"></script>
    <script src="javascripts/TinyTrackballControls.js"></script> <!--http://www.janthor.com/lib/-->
    <script src="javascripts/Projector.js"></script>

    <script src="javascripts/jquery-2.2.4.js"></script><!--http://code.jquery.com/jquery-1.8.3.js -->
    <script src="javascripts/jquery-ui.js"></script>
    <script src="javascripts/jquery.layout-latest.js"></script>
    <link rel="stylesheet" href="stylesheets/jquery-ui.css"/>
    <link rel="stylesheet" href="/stylesheets/layout-default-latest.css"/>

    <script src="javascripts/angular.js"></script>

    <script src="javascripts/ace.js" type="text/javascript" charset="utf-8"></script>

    <style type="text/css">

        /* Sticky footer styles
           -------------------------------------------------- */

        html,
        body {
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
            overflow: auto; /* when page gets too small */
            /* The html and body elements cannot have any padding or margin. */
        }

        /* Lastly, apply responsive CSS fixes as necessary */
        @media (max-width: 767px) {
            #footer {
                margin-left: -20px;
                margin-right: -20px;
                padding-left: 20px;
                padding-right: 20px;
            }
        }

        .pane {
            display: none; /* will appear when layout inits */
        }

        #container {
            background: #999;
            height: 800px;
            margin: 0 auto;
            width: 100%;
            max-width: 1280px;
            min-width: 700px;
            _width: 700px; /* min-width for IE6 */
        }

        #editor {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 1px solid black;
        }

        #graphical_view {
            width: 100%;
            height: 100%;
            border: 1px solid black;
            background-color: #8cabc2;
            margin: 0px;
            overflow: hidden;
            background-image: -webkit-gradient(#8cabc2, #becfdc, #c5d5e0);
            /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
            background-image: -webkit-linear-gradient(#8cabc2, #becfdc, #c5d5e0);
            /* Firefox 3.6 - 15 */
            background-image: -moz-linear-gradient(#8cabc2, #becfdc, #c5d5e0);
            /* Opera 11.1 - 12 */
            background-image: -o-linear-gradient(#8cabc2, #becfdc, #c5d5e0);
            /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
            background-image: linear-gradient(#8cabc2, #becfdc, #c5d5e0);

        }

        .ui-layout-west {
            overflow: hidden;
        }

        .ui-layout-center {
            overflow: hidden;
        }


    </style>


</head>
<body style="">
<div class="pane ui-layout-center" style="background: #5f9ea0">
    <div id="graphical_view" class="graphical_view"
         style="top:0;left:0;width:100%;height:100%;background-color:#98fb98"></div>
</div>
<div class="pane ui-layout-north" style="background: #b22222">
    <button id="button">Update Geometry</button>
    <button id="zoomAll">Zoom All</button>
</div>
<div class="pane ui-layout-south" style="background: #f0f8ff">
    <div id='loadingDiv'> Please wait... <img src='images/spinner_24.gif'/></div>
    <div style="">
        <pre id="ascii_mesh" style="font-size=0.8em"><pre>
    </div>
</div>
<div class="pane ui-layout-east">

    <div id="myAngularApp" ng-controller='SceneCtrl'>
        <!--
                  <p>{{ getCamera().position.x}}</p>
                  <p>{{ getCamera().position.y}}</p>
                  <p>{{ getCamera().position.z}}</p>
                  <p>{{ getCamera().rotation.x}}</p>
                  <p>{{ getCamera().rotation.y}}</p>
                  <p>{{ getCamera().rotation.z}}</p>
                  <p>{{ getCamera().near}}</p>
                  <p>{{ getCamera().far}}</p>
                  <p>{{ getCamera().fov}}</p>
        -->
        <p>Center of Gravity {{ COG.x }}</p>
        <p>{{ COG.y }}</p>
        <p>{{ COG.z }}</p>

    </div>
</div>
<div class="pane ui-layout-west">

    <div id="editor" class="editor">
        print(" ------------------ Creating youghurt pots -------");

        var height = 20;
        var thickness = 1;
        var radius =10.0;

        var s1 = csg.makeCylinder([0,0,0],[0,0,height] , radius);
        var s2 = csg.makeSphere([0,0,0], radius);
        var s3 = csg.makeCylinder([0,0,-radius*0.7],[0,0,height], radius*2);
        var s4 = csg.fuse(s1,s2);
        var s5 = csg.common(s4,s3);


        var smallRadius = radius-thickness;
        var r1 = csg.makeCylinder([0,0,0],[0,0,height] , smallRadius);
        var r2 = csg.makeSphere([0,0,0],smallRadius);
        var r3 = csg.makeCylinder( [0,0,-radius*0.7 + thickness ],[0,0,height], radius*2);
        var r4 = csg.fuse(r1,r2);
        var r5 = csg.common(r4,r3);

        var solid = csg.cut(s5,r5);

        var dist = 21;
        display(solid);
        display(solid.translate([dist,0,0]));
        display(solid.translate([-dist,0,0]));
        display(solid.translate([0,-dist,0]));
        display(solid.translate([0,dist,0]));


    </div>

</div>


<script src="client_app.js"></script>

<script>
    (function (i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r;
        i[r] = i[r] || function () {
                (i[r].q = i[r].q || []).push(arguments)
            }, i[r].l = 1 * new Date();
        a = s.createElement(o),
            m = s.getElementsByTagName(o)[0];
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m)
    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

    ga('create', 'UA-41181410-1', 'cloudapp.net');
    ga('send', 'pageview');

</script>
</body>
</html>
